<template>
	<view @click="open()" class="flex align-center p-2 border-bottom animate__animated fast animate__fadeIn" hover-class="bg-light">
		<image :src="item.avatar" 
		style="height: 80rpx;width: 80rpx;" 
		class="rounded-circle mr-2"></image>
		<view class="flex flex-column flex-1 ">
			<view class="flex align-center justify-between">
				<text class="font-md">{{item.username}}</text>
				<text class="font-sm text-secondary">{{item.create_date | disabledDate}}</text>
			</view>
			<view class="flex align-center justify-between">
				<text class="text-secondary text-ellipsis" style="max-width: 500rpx;">{{item.content}}</text>
				<uni-badge :text="Unread" type="error"></uni-badge>
			</view>
		</view>
		
	</view>
</template>

<script>
	import $T from '@/common/msg_time.js'
	import uniBadge from '@/components/uni-ui/uni-badge/uni-badge'
	export default{
		components:{
			uniBadge
		},
		props:{
			item:Object,
			index:Number
		},
	
		methods:{
			open(){
				this.checkAuth(()=>{
					let uid = this.item.user==this.$store.state.userInfo.id ? this.item.receive_user : this.item.user
					uni.navigateTo({
						url:`/pages/user-chat/user-chat?user=${uid}&username=${this.item.username}`
					})
				})
				
			}
		},
		computed:{
			Unread(){
				let userInfo = this.$store.state.userInfo

				if(userInfo){
					
					return this.item.user == userInfo.id ? 0 :this.item.unread
				}
				return 0
			}
		},
		filters:{
			// 消息时间的封装
			disabledDate(time){
				return $T.disabledDate(time).key
			}
		}
	}
</script>

<style>
</style>
